<template>
  <div>
    <el-row  style="text-align: center;" :span="24">
      <el-col :span="4">
          <el-date-picker
               v-model="startdate1"
               type="date"
               placeholder="开始日期" >
          </el-date-picker>
      </el-col>
      <el-col :span="4">
          <el-date-picker
               v-model="enddate1"
               type="date"
               placeholder="结束日期">
          </el-date-picker>
      </el-col>
      <el-col :span="7">
        <el-tag type=" success" style="height: 40px;line-height: 40px;font-size: 14px;">选择科室：</el-tag>
          <el-select v-model="selectdept" placeholder="科室分类">
              <el-option :value="item.id" :label="item.deptname" v-for="item in deptclassify" :key="item.id" ></el-option>
          </el-select>
      </el-col>
      <el-col :span="2">
          <el-button type="primary">查询</el-button>
      </el-col>
      <el-col :span="2">
          <el-button type="primary" @click="dialogTableVisible=true">制定排班规则</el-button>
      </el-col>
      <el-col :span="4">
          <el-button type="primary" @click="dialogWorkRuleVisible=true">查询排班规则</el-button>
      </el-col>
    </el-row>

    <el-dialog title="制定医生排班规则" :visible.sync="dialogTableVisible" width="80%" center>

      <el-row style="text-align: center;">
        <el-col :span="8">
          <el-tag type=" success" style="height: 40px;line-height: 40px;font-size: 14px;">选择科室：</el-tag>
          <el-select v-model="workrulePost.selectdeptdialog" >
            <el-option :value="item.id" :label="item.deptname" v-for="item in deptclassify" :key="item.id" ></el-option>
          </el-select>
        </el-col>
        <el-col :span="2" >
          <el-button @click="getUserByDept()" type="primary" >查询</el-button>
        </el-col>
      </el-row>
        <el-table
            :data="workrule"
            style="width: 100%"
            border
            height="300px"
            fit
            >
            <el-table-column
                prop="name"
                label="医生姓名"
                width="80">
            </el-table-column>



          <el-table-column
              label="周一上午"
              width="80">
               <template slot-scope="scope">
                 <el-checkbox v-model="workrule[scope.$index].checkbox[0].checked" true-label="1" false-label="0" @change="changeCheckbox(scope.$index,0)"></el-checkbox>
               </template>
            </el-table-column>
            <el-table-column
              label="周一下午"
              width="80">
              <template slot-scope="scope">
                <el-checkbox v-model="workrule[scope.$index].checkbox[1].checked" true-label='1' false-label="0" @change="changeCheckbox(scope.$index,1)"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column
              prop="province"
              label="周二上午"
              width="80">
              <template slot-scope="scope">
                <el-checkbox v-model="workrule[scope.$index].checkbox[2].checked" true-label='1' false-label="0" @change="changeCheckbox(scope.$index,2)"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column
              prop="city"
              label="周二下午"
              width="80">
              <template slot-scope="scope">
                <el-checkbox v-model="workrule[scope.$index].checkbox[3].checked" true-label='1' false-label="0" @change="changeCheckbox(scope.$index,3)"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="周三上午"
              width="80">
              <template slot-scope="scope">
                <el-checkbox v-model="workrule[scope.$index].checkbox[4].checked" true-label='1' false-label="0" @change="changeCheckbox(scope.$index,4)"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column
              prop="zip"
              label="周三下午"
              width="80">
              <template slot-scope="scope">
                <el-checkbox v-model="workrule[scope.$index].checkbox[5].checked" true-label='1' false-label="0" @change="changeCheckbox(scope.$index,5)"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="周四上午"
              width="80">
              <template slot-scope="scope">
                <el-checkbox v-model="workrule[scope.$index].checkbox[6].checked" true-label='1' false-label="0" @change="changeCheckbox(scope.$index,6)"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column
              prop="zip"
              label="周四下午"
              width="80">
              <template slot-scope="scope">
                <el-checkbox v-model="workrule[scope.$index].checkbox[7].checked" true-label='1' false-label="0" @change="changeCheckbox(scope.$index,7)"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="周五上午"
              width="80">
              <template slot-scope="scope">
                <el-checkbox v-model="workrule[scope.$index].checkbox[8].checked" true-label='1' false-label="0" @change="changeCheckbox(scope.$index,8)"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column
              prop="zip"
              label="周五下午"
              width="80">
              <template slot-scope="scope">
                <el-checkbox v-model="workrule[scope.$index].checkbox[9].checked" true-label='1' false-label="0" @change="changeCheckbox(scope.$index,9)"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="周六上午"
              width="80">
              <template slot-scope="scope">
                <el-checkbox v-model="workrule[scope.$index].checkbox[10].checked" true-label='1' false-label="0" @change="changeCheckbox(scope.$index,10)"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column
              prop="zip"
              label="周六下午"
              width="80">
              <template slot-scope="scope">
                <el-checkbox v-model="workrule[scope.$index].checkbox[11].checked" true-label='1' false-label="0" @change="changeCheckbox(scope.$index,11)"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="周日上午"
              width="80">
              <template slot-scope="scope">
                <el-checkbox v-model="workrule[scope.$index].checkbox[12].checked" true-label='1' false-label="0" @change="changeCheckbox(scope.$index,12)"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column
              prop="zip"
              label="周日下午"
              width="80">
              <template slot-scope="scope">
                <el-checkbox v-model="workrule[scope.$index].checkbox[13].checked" true-label='1' false-label="0" @change="changeCheckbox(scope.$index,13)"></el-checkbox>
              </template>
            </el-table-column>
          </el-table>
          <div class="pageination">
              <el-pagination background :page-size=pageSize layout="prev, pager, next" @current-change="currentPageDialog" :total="count" ></el-pagination>
          </div>
          <el-row style="text-align: center;">
            <el-col :span="8">
              <el-tag type=" success" style="height: 40px;line-height: 40px;font-size: 14px;">规则名称：</el-tag>
              <el-input v-model="workrulePost.ruleName" placeholder="规则名称" style="width: 60%;"></el-input>
            </el-col>
            <el-col :span="8">
              <el-tag type=" success" style="height: 40px;line-height: 40px;font-size: 14px;">起始时间：</el-tag>
              <el-date-picker v-model="workrulePost.startdate2"
                    type="date" placeholder="起始时间" value-format='yyyy-MM-dd'>
              </el-date-picker>
            </el-col>
            <el-col :span="8">
              <el-tag type=" success" style="height: 40px;line-height: 40px;font-size: 14px;">结束时间：</el-tag>
              <el-date-picker v-model="workrulePost.enddate2"
                    type="date" placeholder="结束时间" value-format='yyyy-MM-dd'>
              </el-date-picker>
            </el-col>
          </el-row>
           <div slot="footer" class="dialog-footer">
              <el-button @click="dialogTableVisible = false">取 消</el-button>
              <el-button type="primary" @click="addDialog()">确 定</el-button>
            </div>

    </el-dialog>




    <el-dialog title="制定医生排班规则" :visible.sync="dialogWorkRuleVisible" width="80%" center>

      <el-row style="text-align: center;">
        <el-col :span="8">
          <el-tag type=" success" style="height: 40px;line-height: 40px;font-size: 14px;">选择科室：</el-tag>
          <el-select v-model="workrulePost.selectdeptdialog" >
            <el-option :value="item.id" :label="item.deptname" v-for="item in deptclassify" :key="item.id" ></el-option>
          </el-select>
        </el-col>
        <el-col :span="2" >
          <el-button @click="getWorkByDept()" type="primary" >查询</el-button>
        </el-col>
      </el-row>

        <el-table
            :data="userWorkRule"
            style="width: 100%"
            border
            height="300px"
            fit
            >
            <el-table-column
                type="selection"
                width="80">
            </el-table-column>
          <el-table-column
              label="规则名称"
              prop="rulename"
              width="80">
            </el-table-column>
            <el-table-column
              label="科室名称"
              prop="deptname"
              width="80">
            </el-table-column>
            <el-table-column
              prop="name"
              label="医生姓名"
              width="80">
            </el-table-column>
            <el-table-column
              prop=""
              label="时间"
              width="80">
            </el-table-column>
          </el-table>
          <!-- <div class="pageination">
              <el-pagination background :page-size=pageSize layout="prev, pager, next" @current-change="currentPageDialog" :total="count" ></el-pagination>
          </div> -->
          <el-row style="text-align: center;">
            <el-col :span="8">
              <el-tag type=" success" style="height: 40px;line-height: 40px;font-size: 14px;">规则名称：</el-tag>
              <el-input v-model="workrulePost.ruleName" placeholder="规则名称" style="width: 60%;"></el-input>
            </el-col>
            <el-col :span="8">
              <el-tag type=" success" style="height: 40px;line-height: 40px;font-size: 14px;">起始时间：</el-tag>
              <el-date-picker v-model="workrulePost.startdate2"
                    type="date" placeholder="起始时间" value-format='yyyy-MM-dd'>
              </el-date-picker>
            </el-col>
            <el-col :span="8">
              <el-tag type=" success" style="height: 40px;line-height: 40px;font-size: 14px;">结束时间：</el-tag>
              <el-date-picker v-model="workrulePost.enddate2"
                    type="date" placeholder="结束时间" value-format='yyyy-MM-dd'>
              </el-date-picker>
            </el-col>
          </el-row>
           <div slot="footer" class="dialog-footer">
              <el-button @click="dialogWorkRuleVisible = false">取 消</el-button>
              <el-button type="primary" @click="">确 定</el-button>
            </div>

    </el-dialog>


  </div>
</template>

<script>
  export default {
    name: 'workrule',
    data(){
      return{
        startdate1:'',
        enddate1:'',
        workruleid:'',
        dialogWorkRuleVisible:false,
        userWorkRule:'',
        workrulePost:{
          startdate2:'',
          enddate2:'',
          selectdeptdialog:'',
          ruleName:'',
          loginname:[],
          checkeds:[],
          name:[],
          allLength:[],
          id:[],
          len:[]
        },
        workdocInfoPost:{

        },
        deptclassify:'',
        selectdept:'',
        oldselectdeptdialog:'',
        count:0,
        workrule3:'',
        pageSize:8,
        workrule:[
          // {
          //   name:'张医生',
          //   checkeds:'',
          //   checkbox:''
          // },
          // {
          //   name:'李医生',
          //   checkeds:'',
          //   checkbox:''
          // },
          // {
          //   name:'陈医生',
          //   checkeds:'',
          //   checkbox:''
          // },
        ],

        checkbox:[
          {
            label:'周一上午',
            checked:'0'
          },
          {
            label:'周一下午',
            checked:'0'
          },
          {

            label:'周二上午',
            checked:'0'
          },
          {

            label:'周二下午',
            checked:'0'
          },
          {

            label:'周三上午',
            checked:'0'
          },
          {

            label:'周三下午',
            checked:'0'
          },
          {

            label:'周四上午',
            checked:'0'
          },
          {

            label:'周四下午',
            checked:'0'
          },
          {

            label:'周五上午',
            checked:'0'
          },
          {

            label:'周五下午',
            checked:'0'
          },
          {

            label:'周六上午',
            checked:'0'
          },
          {

            label:'周六下午',
            checked:'0'
          },
          {

            label:'周日上午',
            checked:'0'
          },
          {

            label:'周日下午',
            checked:'0'
          },
        ],
        dialogTableVisible:false,
      }
    },
    methods:{
        onlord2:function(){
            let urlDeptClassify=`/hisbg/deptment`;
            let g_deptclassify=this.$axios.get(urlDeptClassify);
            g_deptclassify.then(res=>{
            this.deptclassify=res.data;
        })
        },
        onlord3:function(){
            let urlDeptClassify=`/hisbg/queryworkrule`;
            let g_deptclassify=this.$axios.get(urlDeptClassify);
            g_deptclassify.then(res=>{
            this.userWorkRule=res.data;
        })
        },
        onlordDialog:function(pageNum,selectid){
              let urlTable=`/hisbg/queryuserbydept?pageNum=${pageNum}&pageSize=${this.pageSize}&deptid=${selectid}`;
              let g_table=this.$axios.get(urlTable);
            g_table.then(res=>{
            	this.workrule=res.data.list;
              this.init();
              this.count=res.data.count;
            })
        },
        getUserByDept:function(){
            // let urlDeptClassify=`/hisbg/queryuserbydept?deptid=${this.selectdeptdialog}`;
            this.oldselectdeptdialog=this.workrulePost.selectdeptdialog;
            // let g_deptclassify=this.$axios.get(urlDeptClassify);
            // g_deptclassify.then(res=>{
            // this.deptclassify=res.data;
            // })
            this.onlordDialog(1,this.workrulePost.selectdeptdialog);
        },
        changeCheckbox:function(rowIndex,checkedIndex){
            let sum='';
            for(let i=0;i<this.workrule[rowIndex].checkbox.length;i++){
                sum+=this.workrule[rowIndex].checkbox[i].checked;
            }
            this.workrule[rowIndex].checkeds=sum;
        },
        currentPageDialog: function(pageNum) {
            this.onlordDialog(pageNum,this.oldselectdeptdialog);
        },
        addDialog:function(){
          // this.dialogTableVisible = false;
          this.handle();
          this.addWorkRule();
        },
        // addWorkDocInfo:function(){
        //     let url = `/hisbg/addworkdocinfo`;
        //     let g = this.$axios.post(url, this.$qs.stringify(this.workdocInfoPost));
        //     let rs;
        //     g.then(res => {
        //         rs = res.data;
        //         if(rs){

        //         }else{
        //           alert("增加失败");
        //         }
        //     })
        // },
        addWorkRule:function(){
            let url = "/hisbg/addworkrule";
            let g = this.$axios.post(url, this.$qs.stringify(this.workrulePost));
            let rs;
            g.then(res => {
              rs = res.data;
              this.workruleid=rs;
              })
        },
        handle:function(){
            for (var i = 0; i < this.workrule.length; i++) {
                this.workrulePost.loginname[i]=this.workrule[i].loginname;
                this.workrulePost.checkeds[i]=this.workrule[i].checkeds==''?'00000000000000':this.workrule[i].checkeds;
                this.workrulePost.name[i]=this.workrule[i].name;
                this.workrulePost.allLength[i]=this.workrule.length;
                this.workrulePost.id[i]=this.workrule[i].id;
                this.workrulePost.len[i]=6;
            }
        },
        init:function(){
            for(let i=0;i<this.workrule.length;i++){
                let a=JSON.parse(JSON.stringify(this.checkbox));
                this.workrule[i].checkbox=a;
            }
        },
        getWorkByDept:function(){
            
        }
    },
    mounted:function(){
        this.onlord2();
        this.onlord3();
    }
  }
</script>

<style>
</style>
